<template>
    <view class="userTop">
        <view class="header">
            <image :src="userInfomation?.avatar" mode="aspectFit" />
        </view>

        <view class="infomation">
            <view class="userInfo">
                <view class="name">{{ userInfomation?.nickName }}</view>
                <view class="tag" @click="roleChangePop">
                    <text>{{ userInfomation?.grade == 2 ? '金牌' : '' }}{{ userRoleType[userInfomation?.identityType] }}</text>
                    <image v-if="userInfomation?.identityPermissionsList?.length != 1" src="/static/common/icon_sort_white.png"></image>

                    <view class="selectRole" :class="roleSelectShow && 'show'">
                        <view class="role" @click.stop="roleSelect(item)" v-for="item in RoleList" :key="item">
                            {{ item.text }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="date">{{ `${date.getMonth() + 1}月${date.getDate()}日，周${weekList[date.getDay()]}` }}</view>
        </view>

        <view class="InvitationCode" v-if="userRole != 0" @click="copy(userInfomation)">
            <template v-if="userRole == 4">
                <text>邀请码：{{ userInfomation?.status == 1 ? userInfomation?.inviteCode : '请先进行企业认证' }}</text>
                <image src="/static/icon_copy.png"></image>
            </template>

            <template v-else>
                <text>邀请码：{{ userInfomation?.xmtrStatus == 2 ? userInfomation?.inviteCode : '请先进行实名认证' }}</text>
                <image src="/static/icon_copy.png"></image>
            </template>
        </view>
    </view>

    <uni-popup ref="popup" type="center" border-radius="10px" mask-background-color="rgba(0,0,0,0)" @maskClick="maskClick">
        <view class="popupContent">
            <!-- <view class="popupTop">
                <view class="title">切换角色</view>
                <uni-data-select v-model="chengedRole" :localdata="RoleList" placeholder="请选择"></uni-data-select>
            </view>

            <view class="buttons">
                <view class="confirm" @click="changeRole">确定</view>
            </view> -->
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { defineOptions, defineProps, ref, withDefaults, nextTick, watchEffect, onMounted, onUpdated } from 'vue';
import { onShow, onHide } from '@dcloudio/uni-app';
import { getUserInfoMethod, userApis } from '@/utils/apis';
defineOptions({
    name: 'userHeader'
});
const date = new Date();
const weekList = ref(['日', '一', '二', '三', '四', '五', '六']);
const userInfomation = ref(null);
const userRole = ref(0);
const userRoleType = ['悦居推客', '悦居管家', '运营中心', '市级代理', '省级代理'];
const props = withDefaults(
    defineProps<{
        time?: number;
    }>(),
    {
        time: 0
    }
);

onShow(async () => {
    if (!uni.getStorageSync('userLoginInfo')) {
        return;
    }
    await getUserInfoMethod();
    userRole.value = uni.getStorageSync('userRole');

    if (userRole.value == 4) {
        let res = await userApis.getCompanyInfo();
        userInfomation.value = res.data;
        let r = uni.getStorageSync('userInfomation') ? JSON.parse(uni.getStorageSync('userInfomation')) : null;
        userInfomation.value = { ...r, ...userInfomation.value };
    } else {
        let res = await userApis.getBankDetail();
        userInfomation.value = uni.getStorageSync('userInfomation') ? JSON.parse(uni.getStorageSync('userInfomation')) : null;

        userInfomation.value = { ...res.data, ...userInfomation.value };

        console.log(userInfomation.value);
    }
});

onHide(() => {
    popup.value.close();
    roleSelectShow.value = false;
});

const popup = ref();
const RoleList = ref([]);
const roleSelectShow = ref(false);
const roleChangePop = () => {
    if (userInfomation.value.identityPermissionsList.length === 1) return;
    let list = [
        { value: '0', text: '悦居推客' },
        { value: '1', text: '悦居管家' },
        { value: '2', text: '运营中心' },
        { value: '3', text: '市级代理' },
        { value: '4', text: '省级代理' }
    ];
    let res = [];
    for (let s of userInfomation.value.identityPermissionsList) {
        res.push(list[s]);
    }
    RoleList.value = res;
    roleSelectShow.value = true;
    popup.value.open();
};

const roleSelect = (item) => {
    if (userRole.value == item.value) {
        popup.value.close();
        roleSelectShow.value = false;
        return;
    }
    uni.setStorageSync('userRole', item.value);

    uni.reLaunch({
        url: '/pages/home/home'
    });
};

const maskClick = () => {
    popup.value.close();
    roleSelectShow.value = false;
};

const copy = (str) => {
    if (userRole.value == 4) {
        if (str.status != 1) {
            uni.showToast({
                icon: 'none',
                title: '请先进行企业身份认证'
            });

            return;
        }
    } else {
        if (str.xmtrStatus != 2) {
            uni.showToast({
                icon: 'none',
                title: '请先进行身份认证'
            });

            return;
        }
    }

    uni.setClipboardData({
        data: str.inviteCode,
        success() {
            uni.showToast({
                icon: 'none',
                title: '邀请码复制成功'
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.userTop {
    width: 100%;
    padding: 0 16rpx;
    display: flex;
    align-items: center;

    .header {
        overflow: hidden;
        background-color: #fff;
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
        margin-right: 28rpx;
        image {
            width: 108rpx;
            height: 108rpx;
        }
    }

    .InvitationCode {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 5rpx;

        text {
            font-size: 20rpx;
            color: #333333;
        }
        image {
            width: 24rpx;
            height: 24rpx;
        }
    }

    .infomation {
        .userInfo {
            display: flex;
            align-items: center;
            gap: 14rpx;
            .name {
                font-weight: bold;
                font-size: 32rpx;
                color: #333333;
            }
            .tag {
                padding: 0 12rpx;
                height: 36rpx;
                background: #2c72ff;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10rpx;
                border-radius: 8rpx;
                position: relative;

                text {
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #ffffff;
                    display: block;
                }
                image {
                    width: 20rpx;
                    height: 20rpx;
                }

                .selectRole {
                    position: absolute;
                    z-index: 100;
                    top: 130%;
                    left: 0;
                    height: auto;
                    width: 100%;
                    background-color: #fff;
                    border-radius: 8rpx;
                    box-shadow: 0 0 30rpx 15rpx rgba(0, 0, 0, 0);
                    transition: 0.2s;
                    padding: 0;
                    overflow: hidden;
                    .role {
                        text-align: center;
                        padding: 0 12rpx;
                        font-size: 20rpx;
                        height: 0;
                        transition: 0.2s;
                        color: #333;
                    }

                    &.show {
                        padding: 6rpx 0;
                        box-shadow: 0 0 30rpx 15rpx rgba(0, 0, 0, 0.15);
                        .role {
                            height: 50rpx;
                            line-height: 50rpx;
                            &:last-child {
                                border: none;
                            }
                        }
                    }
                }
            }
        }
        .date {
            font-size: 24rpx;
            color: #333333;
            margin-top: 20rpx;
        }
    }
}
// .popupContent {
//     width: 80vw;
//     border-radius: 24rpx;
//     padding: 40rpx;
//     background-color: #fff;
//     box-shadow: 0 0 30rpx 15rpx rgba(0, 0, 0, 0.15);

//     .popupTop {
//         .title {
//             font-weight: 700;
//             font-size: 34rpx;
//             color: #333;
//             margin-bottom: 40rpx;
//         }
//     }

//     .buttons {
//         margin-top: 40rpx;
//         width: 100%;
//         view {
//             background-color: #2c72ff;
//             width: 100%;
//             border-radius: 18rpx;
//             height: 80rpx;
//             font-size: 32rpx;
//             line-height: 80rpx;
//             color: #fff;
//             text-align: center;
//         }
//     }
// }
// ::v-deep .uni-stat__select {
//     height: 100%;
//     .uni-stat-box {
//         background-color: transparent;
//     }
//     .uni-select {
//         height: 100%;
//         padding: 12rpx 24rpx;
//     }
//     .uni-select__input-box {
//         height: 100%;
//     }

//     .uni-select__input-placeholder,
//     .uni-select__input-text {
//         line-height: 48rpx;
//         font-size: 32rpx;
//         color: #333333;
//     }
// }
</style>
